<!--文章列表组件-->
<template>
  <div>
    <navigation v-on:search="search($event)"></navigation>
    <el-row class="row">
      <el-col v-for="content in list" :sm="{span:24}" :xl="{span:14,offset:5}" :lg="{span:18,offset:3}" :md="{span:18,offset:3}">
        <el-card shadow="hover">

          <div class="title" v-show="content.state === 1" @click="detail(content.id)">
            <el-tag type="info">草稿</el-tag>
            {{ content.title }}
          </div>
          <div class="title" v-show="content.state !== 1" @click="detail(content.id)">
            <el-tag type="success">{{ content.type }}</el-tag>
            {{ content.title }}
          </div>

          <div class="opt" v-show="myContent">
            <el-button type="danger" size="mini" icon="el-icon-delete" @click="del(content.id)" circle></el-button>
            <el-button type="primary" size="mini" icon="el-icon-edit" @click="edit(content.id)" circle></el-button>
          </div>

          <div style="clear: both"></div>
          <div class="nickname"> 作者：{{ content.nickname ? content.nickname : '天山童姥' }}
            <span class="readCount"> 浏览量：{{ content.readCount ? content.readCount : 0 }}</span>
            <!--            <span class="secondTitle">{{-->
            <!--              content.secondTitle ? (content.secondTitle.length > 100 ? content.secondTitle.substring(100) : content.secondTitle.length) : content.secondTitle-->
            <!--            }}</span>-->
            <span class="createDate">{{ content.createDate }}</span>
          </div>
        </el-card>
      </el-col>
      <el-col :sm="{span:24}" :xl="{span:14,offset:5}" :lg="{span:18,offset:3}" :md="{span:18,offset:3}">
        <el-pagination
          @current-change="handleCurrentChange"
          background
          layout="prev, pager, next"
          :page-count="pages"
          :page-size="pageSize" style="float: right;
    margin: 15px;">
        </el-pagination>
      </el-col>

    </el-row>

  </div>
</template>

<script>
import Navigation from "./Navigation";
import axios from 'axios'

export default {
  name: "ContentList",
  props: [
    'list',
    'myContent',
    'pages',
    'currentPage',
    'pageSize'
  ],
  components: {
    "navigation": Navigation,
  },
  methods: {
    search(content) {
      this.$emit("search", content)
    },
    handleCurrentChange(page) {
      this.currentPage = page;
      this.$emit("changePage", this.currentPage);
    },
    del(id) {
      this.$confirm('此操作将永久删除该文章, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        axios.delete("/api/content/del_content?id=" + id).then(res => {
          if (res.data.code === 200) {
            this.$message.success("删除成功！");
            this.$emit("deleteSuccess", true);
          } else if (res.data.code === 403) {
            this.$message.warning("您还未登录，请先登录！");
            setTimeout(() => {
              this.$router.push({
                path: "/login",
                query: {
                  route: "/my_content",
                  activeIndex: '2'
                }
              })
            }, 1000);
          } else {
            this.$message.error(res.data.msg);
          }
        }).catch(err => {
          this.$message.error(err.response.data.msg)
        })

      });
    },
    edit(id) {
      this.$router.push({
        path: '/write',
        query: {
          id: id
        }
      })
    },
    indexData(contentList) {
      this.list = contentList
    },
    detail(id) {
      console.log("id=", id)
      this.$router.push({
        path: "/detail",
        query: {
          id: id
        }
      })
    }
  }
}
</script>

<style scoped>
.title {
  font-size: 1.25rem;
  margin-bottom: 10px;
  float: left;
}

.opt {
  float: right;
}

.secondTitle {
  font-size: 1rem;
  margin-bottom: 10px;
  margin-left: 15px;
}

.createDate {
  float: right;
}

.readCount{
  margin-left: 25px;
}

.nickname, .createDate {
  font-size: 0.75rem;
  color: darkgray;
}

.row {
  cursor: pointer;
  margin-top: 10px;
}
</style>
